<template>
  <div class="pdf-container">
    <router-link target="_blank" to="/d3/pdf">
      <el-button type="primary">下载pdf</el-button>
    </router-link>
    <el-button type="primary" :loading="downloadLoading" @click="handleDownload">导出execl</el-button>
    <div>
      <testTable
        :tableSet="tableSet"
        @handleClick="handleClick"
        @handleGetSearchParams="handleGetSearchParams"
        @handleClearParams="handleClearParams"
        @handleChangePage="handleChangePage"
      />
    </div>
  </div>
</template>



<script>
import { orderTable } from "@/utils/table.js";
export default {
  data() {
    return {
      tableSet: {
        //   表格的数据
        tableData: orderTable,
        // 表格的搜索表单
        filterFrom: [
          {
            name: "nameInput", //搜索组件的名字
            params: "name", //查询传给后台的参数
            label: "姓名", //姓名
            palceholder: "请输入姓名",
            defaultVal: "hello", //默认值
            ref: "nameInput"
          },
          {
            name: "sexInput",
            params: "sex",
            label: "性别",
            palceholder: "请输入性别",
            defaultVal: "",
            ref: "sexInput"
          },
          {
            name: "typeSelect",
            params: "type", //查询传给后台的参数
            label: "类型", //姓名
            palceholder: "请输选择类型",
            defaultVal: 1, //默认值
            ref: "typeSelect"
          }
        ],
        // 表格的头部按钮
        headerBtn: [
          {
            text: "Search",
            handleName: "handleSeacrh" //事件名字
          }
        ],
        //   表格列的配置
        clos: [
          {
            prop: "name", //属性
            label: "姓名", //显示
            align: "center", //对其方式
            width: "200", //宽度
            isShow: true
          },
          {
            prop: "sex", //属性
            label: "性别", //显示
            isShow: true
          },
          {
            prop: "phone", //属性
            label: "电话", //显示
            isShow: true,
            link: row => {
              this.$router.push({
                path: "/self/self",
                query: {
                  id: row.sex
                }
              });
            }
          },
          {
            prop: "love", //属性
            label: "爱好", //显示
            isShow: true
          },
          {
            prop: "local", //属性
            label: "地址", //显示
            isShow: true
          },
          {
            prop: "Status", //属性
            label: "状态", //显示
            isShow: true,
            html: row => {
              if (row.type == 1) {
                return `<span>启用</span>`;
              } else {
                return `<span>禁用</span>`;
              }
            }
          }
        ],
        // 表格按钮的配置
        btns: [
          {
            text: "编辑", //按钮上面的文字、
            type: "primary", //按钮的类型
            size: "mini", //按钮大小
            handleName: "handleEdit" //按钮点击的事件名字
          },
          {
            text: "删除", //按钮上面的文字、
            type: "danger", //按钮的类型
            handleName: "handleDelete" //按钮点击的事件名字
          }
        ],
        // 数据总条数
        total: 100
      },
      downloadLoading: false,
      filename: "",
      autoWidth: true,
      bookType: "xlsx"
    };
  },
  mounted() {},
  methods: {
    handleClick(row, index, name) {
      if (this[name]) {
        this[name](row, index);
      }
    },
    // 编辑
    handleEdit(row, index) {
      console.log(row, index, "编辑数据");
    },
    // 删除
    handleDelete(row, index) {
      console.log(row, index, "删除数据");
    },
    // 搜索
    handleSeacrh() {
      console.log(this.searchParmas, "查询参数");
    },
    // 获取查询参数
    handleGetSearchParams(params, v) {
      console.log(params, v);
      this.searchParmas[params] = v;
    },
    // 分页
    handleChangePage(params, v) {
      for (var key in this.searchParmas) {
        if (key == params) {
          this.searchParmas[key] = v;
        }
      }
    },
    // 清空查询参数
    handleClearParams() {
      for (var key in this.searchParmas) {
        // 如果是分页参数就不要清除了
        if (key == "pageSize" || key == "pageIndex") {
          return;
        } else {
          this.searchParmas[key] = "";
        }
      }
    },
    handleDownload() {
      this.downloadLoading = true;
      import("./comps/Export2Excel").then(excel => {
        const tHeader = ["姓名", "性别", "电话", "爱好", "地址","状态"];
        const filterVal = ["name","sex","phone","love","local","type"];
        const list = orderTable;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "type") {
            if(v[j] == 0){
              return '启用'
            }else{
              return '禁用'
            }
          } else {
            return v[j];
          }
        })
      );
    }
  }
};
</script>


<style lang="scss" scoped>
.pdf-container {
  padding: 25px;
}
</style>
